let layer=layui.layer
// 1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 1.2 配置选项
let options = {
  // 纵横比
  aspectRatio: 1,
  preview: ".preview",
};

// 1.3 创建裁剪区域
$image.cropper(options);

//

$(`#btnChooseImage`).on(`click`,function () {
  $(`#file`).click()
})


$(`#file`).on(`change`, function () {
  // 找到用户选择的文件（文件对象）
   const file = this.files[0]
   console.log(this.files)
   if (!file) {
    return layer.msg(`请选择文件`)
   }
 //根据选择的文件，为文件对象创建一个对应的url 地址，用于访问被选择的图片
   const newSrc = URL.createObjectURL(file)

   $image
     .cropper('destroy')      // 销毁旧的裁剪区域
     .attr('src', newSrc)  // 重新设置图片路径
     .cropper(options)        // 重新初始化裁剪区域

 })



//  ============================================上传头像=======================================
$(`#btnCreateAvatar`).on(`click`,function(){
  let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 100,
    height: 100
});
// 把图片转成base64格式
let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
console.log(dataURL);


axios.post(`/my/update/avatar`,`avatar=${encodeURIComponent(dataURL)}`).then( ({data:{status,message}}) =>{
  // console.log(res)
  if (status!==0) {
    return layer.msg(message)
  }
  layer.msg(message)
  window.parent.getUserInfo()
})
})